<script lang="ts" setup>
import dayjs from 'dayjs'
import DateImg from '@/assets/images/date.png'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
let timer = ref<any>(0)
const nowTime = ref(dayjs().format('YYYY-MM-DD'))
const nowTimeFormat = ref(dayjs().format('YYYY.MM.DD'))
const nowHourTime = ref(dayjs().format('HH'))
const nowMinuteTime = ref(dayjs().format('mm'))
const nowSecondTime = ref(dayjs().format('ss'))
const nowWeek = computed(() => {
  const datas = dayjs().day()
  const week = ['日', '一', '二', '三', '四', '五', '六']
  return '星期' + week[datas]
})
const getData = () => {
  nowTime.value = dayjs().format('YYYY-MM-DD')
  nowTimeFormat.value = dayjs().format('YYYY.MM.DD')
  nowHourTime.value = dayjs().format('HH')
  nowMinuteTime.value = dayjs().format('mm')
  nowSecondTime.value = dayjs().format('ss')
  timer.value = setTimeout(() => {
    getData()
  }, 1000)
}
onMounted(() => {
  getData()
})
onBeforeUnmount(() => {
  clearTimeout(timer.value)
})
</script>

<template>
  <div class="left-title-container" color-blue>
    <div flex items-center>
      <img mr-20 w-44 h-44 :src="DateImg" alt="" />
      <span class="color-[#49A3FF]">{{ nowTimeFormat }}</span>
    </div>
    <div flex items-center ml-100>
      <span color-white>{{ nowWeek }}</span>
      <span ml-20 class="color-[#49A3FF]"
        >{{ nowHourTime }}:{{ nowMinuteTime }}:{{ nowSecondTime }}</span
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
.left-title-container {
  display: flex;
  align-items: center;
  font-size: 36px;
  line-height: 42px;
}
</style>
